<template>
  <div class="bilingual-input">
    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="中文" name="zh">
        <!-- 普通输入框 -->
        <el-input 
          v-if="inputType === 'input'"
          :id="`${field}_zh`"
          :value="zhValue"
          @input="handleZhInput"
          :placeholder="`请输入${label}（中文）`"
          :disabled="disabled"
          v-bind="inputProps"
        />
        <!-- 文本域 -->
        <el-input 
          v-else-if="inputType === 'textarea'"
          type="textarea"
          :id="`${field}_zh`"
          :value="zhValue"
          @input="handleZhInput"
          :placeholder="`请输入${label}（中文）`"
          :disabled="disabled"
          :rows="inputProps.rows || 4"
          v-bind="inputProps"
        />
        <!-- 富文本编辑器 -->
        <quill-editor 
          v-else-if="inputType === 'quill'"
          :value="zhValue"
          @input="handleZhInput"
          v-bind="inputProps"
        />
      </el-tab-pane>
      <el-tab-pane label="English" name="en">
        <!-- 普通输入框 -->
        <el-input 
          v-if="inputType === 'input'"
          :id="`${field}_en`"
          :value="enValue"
          @input="handleEnInput"
          :placeholder="`Please enter ${label} (English)`"
          :disabled="disabled"
          v-bind="inputProps"
        />
        <!-- 文本域 -->
        <el-input 
          v-else-if="inputType === 'textarea'"
          type="textarea"
          :id="`${field}_en`"
          :value="enValue"
          @input="handleEnInput"
          :placeholder="`Please enter ${label} (English)`"
          :disabled="disabled"
          :rows="inputProps.rows || 4"
          v-bind="inputProps"
        />
        <!-- 富文本编辑器 -->
        <quill-editor 
          v-else-if="inputType === 'quill'"
          :value="enValue"
          @input="handleEnInput"
          v-bind="inputProps"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'BilingualInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    field: {
      type: String,
      required: true
    },
    label: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    inputType: {
      type: String,
      default: 'el-input' // el-input, el-input (textarea), quill-editor
    },
    inputProps: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      activeTab: 'zh'
    }
  },
  computed: {
    zhValue() {
      return this.getValue('zh')
    },
    enValue() {
      return this.getValue('en')
    }
  },
  methods: {
    getValue(lang) {
      if (!this.value) return ''
      try {
        const json = JSON.parse(this.value)
        return json[lang] || ''
      } catch (e) {
        // 如果不是 JSON，可能是旧数据，返回原值（默认为中文）
        if (lang === 'zh') {
          return this.value
        }
        return ''
      }
    },
    handleZhInput(value) {
      this.updateValue('zh', value)
    },
    handleEnInput(value) {
      this.updateValue('en', value)
    },
    updateValue(lang, value) {
      let json = {}
      
      // 解析现有 JSON
      if (this.value) {
        try {
          json = JSON.parse(this.value)
        } catch (e) {
          // 如果解析失败，可能是旧数据，作为中文值
          if (lang === 'zh') {
            json = { zh: this.value, en: '' }
          } else {
            json = { zh: this.value, en: value }
          }
        }
      }
      
      // 更新对应语言的值
      json[lang] = value
      
      // 确保两个字段都存在
      if (!json.zh) json.zh = ''
      if (!json.en) json.en = ''
      
      // 发出更新事件
      this.$emit('input', JSON.stringify(json))
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        // 当外部值变化时，可以在这里处理
      }
    }
  }
}
</script>

<style scoped>
.bilingual-input {
  width: 100%;
}
.bilingual-input >>> .el-tabs__content {
  padding: 10px;
}
</style>

